<template>
    <div class="root">
    <router-link to="/home/search/search">
        <div class="head-input">
            <div><img src="/img/search.png" alt="">搜索书籍、作者</div>
        </div>
    </router-link>
    
        <div class="select">
            <span :class="selectPath=='/home'?'select-box':''">
                <router-link to="/home">推荐</router-link>
                <div class="underline"></div>    
            </span>
            <span :class="selectPath=='/home/bookrack'?'select-box':''">
                <router-link to="/home/bookrack">书架</router-link>
                <div class="underline"></div>
            </span>
            <span :class="selectPath=='/home/ranking'?'select-box':''">
                <router-link to="/home/ranking">排行</router-link>
                <div class="underline"></div>
            </span>
            <span :class="selectPath=='/home/classify'?'select-box':''">
                <router-link to="/home/classify">分类</router-link>
                <div class="underline"></div>
            </span>
        </div>
    </div>
</template>

<script>

export default{
    data(){
        return{
            selectPath:"/home"
        }
    },
    watch:{
        $route(n,o){
            this.selectPath = n.path
        }
    }
}
</script>

<style scoped lang="less">
a{
    text-decoration: none;
}
.root{
     border-bottom: 1px solid #e7e7e7; 
    
}
img{
    position: relative;
    top: 0.8vw;
    right: 1vw;
    width: 4vw;
}
.head-input{
    width: 92.3vw;
    height: 8.4vw;
    margin: 0 auto;
    border-radius: 1.1vw;
    background-color: #ebebeb;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b1b1b1;
    font-size: @search;
    line-height: 8.4vw;
    /* font-weight: bold; */
  }
  .select{
     width: 77.3vw;
     margin: 0 auto;
    height: 12.8vw;
    font-size: @select;
    display: flex;
    justify-content: space-between;
    align-items:center;
  }
  .select span a{
    display: inline-block;
    height: 12.8vw;
    line-height: 12.8vw;
    font-size:@select;
    color: #9f9f9f;
    text-decoration: none;
  }
  .select-box a{
    border-radius: 0.4vw;
    color: #6464ff!important;
    font-weight: 600;
  }
  .select-box .underline{
      opacity: 1;
  }
  .underline{
      width: 100%;
      border: 0.4vw solid #6464ff;
      position: relative;
      top: -0.8vw;
      border-radius: 1.1vw;
     opacity: 0;
     background-color: #6464ff;
  }
</style>